<template>
  <!-- 雷达图 -->
  <!-- TODO: 目前仅做了 row 和 value 的维度，后续要加上 column 的维度 -->
	<div class="box-body" ref="chart-body" :style="boxHeight" style="padding: 3px 0px 3px 13px;min-width: 800px;min-height: 500px;"></div>

</template>

<script>
/*
	Row 决定维度
	value、column 决定个数
*/
import DashboardLoading from '@/components/dashboard/DashboardLoading';
import DashboardBox from '@/components/dashboard/DashboardBox';

import chinaJson from '@/components/dashboard/static/china.json'

let options = {
  name: 'ChinaMapContent',
  props: {
    widget: {
      type: Object,
      required: true
    },
    height: {
      type: String
    },
    filters: {
      type: Array,
      default() {
        return [];
      }
    },
    mBackground: {
      type: String
    }
  },
  components: {
    DashboardBox,
    DashboardLoading
  },
  mounted() {
    // this.initByWidget();
    this.chartName = this.widget.name;
    this.chartType = this.widgetData.config.chart_type;  // 图表类型，如：line
    this.valueAxis = this.widgetData.config.valueAxis;  // 显示方式，如 vertical--垂直，horizontal --水平

    this.valuesConfig = this.widgetData.config.values;
  },
  watch: {
    widget() {
      this.initByWidget();
      this.chartName = this.widget.name;
      this.chartType = this.widget.widget.data.config.chart_type;
      this.valueAxis = this.widget.widget.data.config.valueAxis;
    },
    'widget.widget.data.config.chart_type': function() {
      this.initByWidget();
      this.chartName = this.widget.name;
      this.chartType = this.widget.widget.data.config.chart_type;
      this.valueAxis = this.widget.widget.data.config.valueAxis;
    },
    filters() {
      this.initByWidget();
      this.chartName = this.widget.name;
      this.chartType = this.widget.widget.data.config.chart_type;
      this.valueAxis = this.widget.widget.data.config.valueAxis;
    }
  },
  data() {
    return {
      loading: true,
      widgetData: {},
      chartName: '',
      chartType: '',
      valueAxis: '',
      valuesConfig: ''
    }
  },
  computed: {
    boxHeight() {
      if(this.height) {
        let height = parseFloat(this.height)+'px';
        return {height: height}
      }else {
        return {'min-height': '250px'}
      }
    }
  },
  methods: {
    initByWidget(reload) {
      this.widgetData = this.widget.widget.data;
      //this.loading = true;
      this.loading = false;
      this.$nextTick(()=>{
        this.renderChart();
      })
    },
    renderChart() {
      const chartBody = this.$refs['chart-body'];
      if(!chartBody) return;
      const chart = this.$echarts.init(chartBody, 'theme-fin1');

            this.$echarts.registerMap('china', chinaJson);

            let series = [
              {
                type: 'map',
                mapType: 'china', // 自定义扩展图表类型
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[]
              }
            ]


            chinaJson.features.forEach(geo => {
              let item = {
                name: geo.properties.name,
                value: geo.properties.size
              }
              series[0].data.push(item);
            })


            let mapOption = {
                legend: {
                    orient: 'vertical',
                    top: 'top',
                    left: 'left',
                    selectedMode: 'multiple',
                    data: ['123', '456'] //TODO
                },
                visualMap: {
                    //min: min,
                    max: 2000,
                    left: 'right',
                    top: 'bottom',
                    //text: ['High', 'Low'],
                    inRange: {
                        //color: ['#d94e5d','#eac736','#50a3ba'].reverse()
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    },
                    calculable : true,
                    textStyle: {
                        color: '#d94e5d'
                    }
                },
                /*geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#EFF0F0',
                            borderColor: '#B5B5B5',
                            borderWidth: 1
                        }
                    }
                },*/
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c}'
                },
                series: series
            }

            console.log('----mapOption---', mapOption)

            chart.setOption(mapOption)
    }

  }
}
export default options;
</script>

<style>

</style>
